<template>
  <div class="computer">
    <to-top/>
    <div class="computer-content">
      <div class="sortheader-container">
        <ul>
          <li class="actived">综合</li>
          <li>新品</li>
          <li>价格</li>
        </ul>
      </div>
      <div class="products-card">
        <product-card v-for="(item, i) in computer" :key="i" :data="item" />
      </div>
    </div>
  </div>
</template>

<script>
import ProductCard from "../../components/ProductCard.vue";
import { getProducts } from "@/api/getProducts";
import ToTop from "@/components/ToTop.vue";
export default {
  components: { ProductCard, ToTop},
  data() {
    return {
      computer: [],
    };
  },
  methods: {},
  mounted() {
    getProducts().then(({ data }) => {
      let res = data.data;
      this.computer = res.filter((i) => {
        return i.categoryId === "2";
      });
    });
  },
};
</script>

<style lang='less' scoped>
.sortheader-container {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid rgb(229, 229, 229);
  ul {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 20px;
    li {
      width: 50px;
      cursor: pointer;
    }
    li.actived {
      color: orangered;
    }
  }
}
.computer {
  width: 100%;
  background-color: rgb(248, 248, 248);
  //   color: white;
  .computer-content {
    width: 80%;
    // background-color: rgb(216, 216, 216);
    background-color: #fff;
    margin: 0 auto;
    .products-card {
      width: 100%;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
  }
}
</style>